<template>
  <el-dialog title="自定义表头" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false" :before-close="close">
    <el-table ref="multipleTable" :data="tableData" :border="true" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="全选" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :loading="loadingSubmit" type="primary" @click="determineHandler">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dialogEditMixin from '@/mixins/dialogEdit'
export default {
  mixins: [dialogEditMixin],
  data() {
    return {
      // 总字段
      tableData: [
        { name: '员工编码' },
        { name: '员工姓名' },
        { name: '性别' },
        { name: '生日' },
        { name: '身份证号' },
        { name: '手机号' },
        { name: '邮箱' },
        { name: '地址' },
        { name: '照片' },
        { name: '部门' },
        { name: '职位' },
        { name: '工种' },
        { name: 'RFID卡' },
        { name: '门禁ID' },
        { name: '工作状态' },
        { name: '人脸识别' },
        { name: '门禁启用/禁用' },
        { name: '备注' },
        { name: '操作' }
      ],
      // 保存选中的字段
      dataList: [],
      // 总列表表头
      tableList: [
        { prop: 'employeeCode', label: '员工编码', align: 'center', minWidth: '120px' },
        { prop: 'name', label: '员工姓名', align: 'center', minWidth: '80px' },
        {
          prop: 'sex',
          label: '性别',
          align: 'center',
          minWidth: '54px',
          formatter(row, col, cell) {
            let sex
            const sexList = [
              { label: '男', value: 1 },
              { label: '女', value: 0 }
            ]
            sexList.forEach((item) => {
              if (item.value === cell) {
                sex = item.label
              }
            })
            return sex
          }
        },
        {
          prop: 'birthday', label: '生日', align: 'center', minWidth: '96px',
          formatter(row, col, cell) {
            const date = new Date(cell)
            const year = date.getFullYear()
            let month = date.getMonth() + 1
            month = month >= 10 ? month : '0' + month
            let d1 = date.getDate()
            d1 = d1 >= 10 ? d1 : '0' + d1
            const time_str = year + '-' + month + '-' + d1
            return cell ? time_str : '--'
          }
        },
        { prop: 'idCard', label: '身份证号', align: 'center', minWidth: '166px' },
        { prop: 'phone', label: '手机号', align: 'center', minWidth: '110px' },
        { prop: 'email', label: '邮箱', align: 'center', minWidth: '180px' },
        { prop: 'adress', label: '地址', align: 'center', minWidth: '200px' },
        {
          prop: 'photo',
          label: '照片',
          custom: 'col2',
          minWidth: '220px',
          align: 'center'
        },
        {
          prop: 'departmentId',
          label: '部门',
          minWidth: '80px',
          align: 'center',
          formatter(row, col, cell) {
            return row.department ? row.department.deptName : '--'
          }
        },
        {
          prop: 'jobId',
          label: '职位',
          minWidth: '80px',
          formatter(row, col, cell) {
            return row.job ? row.job.jobTitle : '--'
          },
          align: 'center'
        },
        {
          prop: 'workId',
          label: '工种',
          minWidth: '80px',
          formatter(row, col, cell) {
            return row.work ? row.work.workName : '--'
          },
          align: 'center'
        },
        { prop: 'rfid', label: 'RFID卡', minWidth: '80px', align: 'center' },
        { prop: 'accessCardID', label: '门禁ID', minWidth: '80px', align: 'center' },
        {
          prop: 'status',
          label: '工作状态',
          minWidth: '80px',
          formatter(row, col, cell) {
            return Number(row.status) === 1 ? '在职' : '离职'
          },
          align: 'center'
        },
        {
          prop: 'faceDetect',
          label: '人脸识别',
          minWidth: '80px',
          formatter(row, col, cell) {
            return row.faceDetect === 1 ? '启用' : '禁用'
          },
          align: 'center'
        },
        {
          prop: 'faceDetect',
          label: '门禁启用/禁用',
          minWidth: '118px',
          formatter(row, col, cell) {
            return row.isEnable ? '启用' : '禁用'
          },
          align: 'center'
        },
        { prop: 'comment', label: '备注', align: 'center', minWidth: '180px' },
        { label: '操作', custom: 'col1', align: 'center', minWidth: '108px' }
      ]
    }
  },
  methods: {
    resetFormData() { },

    handleSelectionChange(event) {
      this.dataList = event
    },
    selectionChange(value) {
      this.$nextTick(() => {
        const refDom = this.$refs.multipleTable
        this.tableData.forEach(item => {
          value.forEach(edit => {
            if (edit.label && edit.label === item.name) {
              refDom.toggleRowSelection(item, true)
            }
          })
        })
      })
    },
    determineHandler() {
      const ary = []
      this.tableList.forEach(item => {
        const bolen = this.dataList.some(edit => item.label === edit.name)
        if (bolen) {
          ary.push(item)
        }
      })
      this.$emit('setTableCol', ary)
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped></style>
